<template>
  <div class="gallery-history-container">
    <md-toolbar class="md-primary">
      <md-button @click.native="goBack" class="md-icon-button">
        <md-icon>keyboard_backspace</md-icon>
      </md-button>
      <h2 class="md-title" style="flex: 1">历史</h2>
      <md-button @click.native="$refs['dialog'].open()" class="md-icon-button">
        <md-icon>delete_sweep</md-icon>
      </md-button>
    </md-toolbar>
    <div class="history-list">
      <md-list v-if="typeof (data) === 'object'">
        <gallery-list :listData="data"></gallery-list>
      </md-list>
      <div v-show="data === 'noimg'" class="error-page">
        <md-icon class="md-size-5x noimg">mood_bad</md-icon>
        <p>没有历史记录</p>
      </div>
      <md-spinner v-if="showLoading" class="loading-spinner" :md-size="75" :md-stroke="2" md-indeterminate></md-spinner>
    </div>
    <md-dialog-confirm
    :md-title="confirm.title"
    :md-ok-text="confirm.ok"
    :md-content-html="confirm.content"
    :md-cancel-text="confirm.cancel"
    @close="onClose"
    ref="dialog">
  </md-dialog-confirm>
  </div>
</template>
<script>
import store from 'store'
import {getListByApi} from './../../service/getData'
import {mapState} from 'vuex'
export default {
  data () {
    return {
      showLoading: true,
      data: null,
      confirm: {
        title: '确定清除历史记录吗？',
        ok: '确定',
        cancel: '取消',
        content: '?'
      }
    }
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    async getData (data, isEX) {
      this.showLoading = true
      let historyData = await getListByApi(data, isEX)
      this.data = historyData.gmetadata
      this.showLoading = false
    },
    onClose () {
      store.remove('history')
      this.data = 'noimg'
    }
  },
  components: {
    galleryList: require('./../../components/common/galleryList')
  },
  computed: {
    ...mapState([
      'common'
    ])
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.data = null
      let history = store.get('history')
      if (history === undefined) {
        vm.data = 'noimg'
        vm.showLoading = false
      } else {
        let historyArray = history.map(function (item, i) {
          return [item.gid, item.token]
        })
        vm.getData(historyArray, vm.common.isEX)
      }
    })
  }
}
</script>

<style scoped>
.gallery-history-container {
  height: 100%
}
.history-list {
  height: calc(100% - 64px);
  overflow: auto
}
.loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -32.5px;
  margin-top: -32.5px
}
.error-page {
  position: absolute;
  top: 50%; 
  left: 50%;      
  color: #DCDCDC;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);   
  -ms-transform: translate(-50%,-50%);    
}
.error-page p {
  color: #828282;
  text-align: center
}
</style>
